<template>
  <div class="page-header">
    <span class="page-title">{{ title }}</span>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    required: true,
    type: String,
    default: ''
  },
  border: {
    type: Boolean,
    default: true
  }
})

onMounted(async () => {
  await nextTick();// 为什么要加这一段呢？？？你猜猜看撒

  if (props.border == false) {
    const pageHeaders = document.querySelectorAll('.page-header');
    pageHeaders.forEach(function (item) {
      item.style.borderBottom = 'none';
      item.style.paddingBottom = 0;
    });
  }
});

</script>

<style scoped lang="scss">
.page-header {
  position: relative;
  padding-bottom: 1rem;
  margin-bottom: 1.375rem;
  border-bottom: 1px solid var(--el-fill-color-light);

  .page-title {
    font-size: 1.125rem;
    line-height: 1.625rem;
    font-weight: bold;
  }
}
</style>